<template>
    <div>
        <div>
            单个上传
            <el-upload
                class="upload-file-el"
                :show-file-list="false"
                :multiple="false"
                :headers="headers"
                :action="uploadFileUrl"
                :on-success="onSingleUploadFile"
                :before-upload="onBeforUpload"
                accept=".text">
                <template #trigger>
                    <el-button
                        type="text"
                        class="addBtn">
                        上传
                    </el-button>
                </template>
            </el-upload>
            <el-button
                v-if="dataContainer.fileData"
                type="text"
                @click="downloadFile(dataContainer.fileData.url)">
                {{dataContainer.fileData?dataContainer.fileData.name:''}}
            </el-button>
        </div>
        <div>
            多个上传
            <el-upload
                class="upload-file-el"
                :show-file-list="false"
                :multiple="true"
                :headers="headers"
                :action="uploadFileUrl"
                :on-success="onBatchUploadFile"
                res="UploadRef">
                <template #trigger>
                    <el-button
                        type="text"
                        class="addBtn">
                        上传
                    </el-button>
                </template>
            </el-upload>
            <el-button
                v-for="item,index in dataContainer.fileDataList"
                :key="index"
                type="text"
                @click="downloadFile(item.url)">
                {{item.name || ''}}
            </el-button>
        </div>
    </div>
</template>

<script>
/**
 * 文件上传模板
 */
import { defineComponent, ref, getCurrentInstance, reactive, nextTick } from 'vue';
import { getFileType,formatFileSize,fileFilter } from '@/common/FileTools.js';
import { uploadFileUrl as uploadFileUrlApi } from "@/api/global";
import { getToken } from '@/utils/auth';

export default defineComponent({
    setup() {
        const UploadRef = ref(null);
        const uploadFileUrl = ref(uploadFileUrlApi); // 上传的图片服务器地址
        const headers = ref({ Authorization: 'Bearer ' + getToken() });
        const dataContainer = reactive({
            fileData:{},
            fileDataList:[],
        });
        /** 文件上传前执行 */
        function onBeforUpload(file){  //文件选择上传执行
            const {type:typeStatus,size:sizeStatus} = fileFilter(
                file,
                '.text',
                1000*24,
            );
            if(!typeStatus || !sizeStatus){
                // instance.$modal.msgError("请选择正确的文件和正确大小的文件");
                return false;
            }else{
                return true;
            }
        }
        /** 文件选择上传后，单个 */
        function onSingleUploadFile(res,file){
            const fileDataList = files.filter(item=>{
                const res = item.response;
                return res && res.code == 200;
            }).map(item=>{
                const res = item.response;
                return {
                    name: res.originalFilename,
                    url:res.url,
                };
            });
            dataContainer.fileDataList = fileDataList;
            dataContainer.fileData = fileDataList[0];
        }
        /** 文件选择上传后，多个 */
        function onBatchUploadFile(res,file,files){
            const fileDataList = files.filter(item=>{
                const res = item.response;
                return res && res.code == 200;
            }).map(item=>{
                const res = item.response;
                return {
                    name: res.originalFilename,
                    url:res.url,
                };
            });
            dataContainer.fileDataList = fileDataList;
            UploadRef.value.clearFiles();
        }
        /** 文件选择上传后，多个(多种处理方法) */
        function onBatchUploadFile_c(res,file,files){
            if(res && res.code == 200){
                dataContainer.fileList.push({
                    name: res.originalFilename,
                    url:res.url,
                    type: `.${getFileType(file.name)}`,
                    len: formatFileSize(file.size),
                });
            }
            const status = files.every(item=>{  //是否都上传结束
                return item.status == 'uploading' || item.status == 'fail';
            });
            if(status && UploadRef.value){
                UploadRef.value.clearFiles();
            }
        }
        /** 下载文件 */
        function downloadFile(url){
            window.open(url);
        }
        return {
            uploadFileUrl,
            headers,
            dataContainer,
            onSingleUploadFile,
            onBatchUploadFile,
            downloadFile,
            UploadRef,
        };
    },
});
</script>